<template>
  <div class="bottom-statistics">
    <!-- 飞行架次 -->
    <div class="statistics-item flight-count">
      <div class="flight-count-unit">次数</div>
      <div class="flight-count-value">{{ flightCount }}</div>
      <div class="flight-count-label">飞行架次</div>
    </div>
    <!-- 飞行里程 -->
    <div class="statistics-item flight-mileage">
      <div class="flight-mileage-unit">km</div>
      <div class="flight-mileage-value">{{ flightMileage }}</div>
      <div class="flight-mileage-label">飞行里程</div>
    </div>
    <!-- 飞行时长 -->
    <div class="statistics-item flight-duration">
      <div class="flight-duration-unit">小时</div>
      <div class="flight-duration-value">{{ flightDuration }}</div>
      <div class="flight-duration-label">飞行时长</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const flightCount = ref(22); // 飞行架次
const flightMileage = ref(1947); // 飞行里程
const flightDuration = ref(5); // 飞行时长
</script>

<style lang="scss" scoped>
.bottom-statistics {
  width: 100%;
  height: 188px;
  background: url("@/assets/images/dashboard_footer_bg.png") no-repeat center
    center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  .statistics-item {
    & + .statistics-item {
      margin-left: 39px;
    }
  }
  // 飞行架次
  .flight-count {
    width: 120px;
    height: 102px;
    background: url("@/assets/images/dashboard_footer_img1.png") no-repeat center top;
    background-size: 100% auto;
    padding-top: 30px;
    .flight-count-unit {
      font-size: 12.48px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 11.65px;
      color: rgba(254, 219, 101, 1);
      text-align: center;
    }
    .flight-count-value {
      font-size: 22.88px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 22.88px;
      color: rgba(102, 255, 255, 1);
      margin-bottom: 8px;
      text-align: center;
    }
    .flight-count-label {
      font-size: 18.2px;
      font-weight: 900;
      letter-spacing: 0px;
      line-height: 14.56px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
  // 飞行里程
  .flight-mileage {
    width: 318px;
    height: 318px;
    background: url("@/assets/images/dashboard_footer_img2.png") no-repeat center top;
    background-size: 100% auto;
    padding-top: 145px;
    .flight-mileage-unit {
      font-size: 11.33px;
      font-weight: 700;
      letter-spacing: -0.01px;
      line-height: 11.33px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      margin-bottom: 4px;
    }
    .flight-mileage-value {
      font-size: 21.39px;
      font-weight: 700;
      letter-spacing: -0.01px;
      line-height: 21.39px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .flight-mileage-label {
      font-size: 11.33px;
      font-weight: 700;
      letter-spacing: -0.01px;
      line-height: 11.33px;
      color: rgba(50, 197, 255, 1);
      text-align: center;
    }
  }
  // 飞行时长
  .flight-duration {
    width: 120px;
    height: 102px;
    background: url("@/assets/images/dashboard_footer_img3.png") no-repeat center top;
    background-size: 100% auto;
    padding-top: 30px;
    .flight-duration-unit {
      font-size: 12.48px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 11.65px;
      color: rgba(254, 219, 101, 1);
      text-align: center;
    }
    .flight-duration-value {
      font-size: 22.88px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 22.88px;
      color: rgba(102, 255, 255, 1);
      margin-bottom: 8px;
      text-align: center;
    }
    .flight-duration-label {
      font-size: 18.2px;
      font-weight: 900;
      letter-spacing: 0px;
      line-height: 14.56px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}
</style>
